<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>


<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="${ctx}/css/Tree.css"/>
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>
<!-- DATATABLES CSS END -->

<script>
    $(document).ready(function() {
        $('#simple-button').popover('#simple-popover', {});
        $('#top-button').popover('#top-popover', {preventLeft: true, preventRight: true, preventBottom:true});
    });
</script>

<h1 class="page-title">职务代理人设置</h1>

<div class="container_12 clearfix leading">

    <div class="tabs side grid_8 leading">
        <div class="clear"></div>
        <div class="grid_12">

            <div id="demo" class="clearfix">
                <table class="display" id="example">
                    <thead>
                    <tr>
                        <th>选择</th>
                        <th>职务名称</th>
                        <th>任职人</th>
                        <th>第一代理人</th>
                        <th>第二代理人</th>
                        <th>第三代理人</th>
                    </tr>
                    </thead>
                    <tbody>
                    <s:iterator value="#request.proxies" var="p" status="sta">
                    <s:if test="#sta.even"><tr class="gradeA"></s:if><s:else><tr class="gradeC"></s:else>
                        <td><input type="checkbox" name="checkbox_proxy" value="${p.id}"/></td>
                        <td>${p.duty.dutyName}</td>
                        <td>${p.employee.name}</td>
                        <%-- 设置 --%>
                        <s:if test="#request.operation == 'set'">
                        <td id="proxyOne${p.id}">
                            <s:if test="#request.p.proxyOne == null">
                                <a class="button popover_button" onclick="onDivShow(${p.id}, 'proxyOne')"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                            </s:if>
                            <s:else>${p.proxyOne.name}</s:else>
                        </td>
                        <td id="proxyTwo${p.id}">
                            <s:if test="#request.p.proxyOne != null and #request.p.proxyTwo == null">
                                <a class="button popover_button" onclick="onDivShow(${p.id}, 'proxyTwo')"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                            </s:if>
                            <s:elseif test="#request.p.employee != null and #request.p.proxyTwo != null">
                                ${p.proxyTwo.name}
                            </s:elseif>
                            <s:else>
                                <button id="btn_a_proxyTwo${p.id}" class="button" type="button" disabled="disabled">添加</button>
                                <a id="btn_b_proxyTwo${p.id}" class="button popover_button" style="display:none;" onclick="onDivShow(${p.id}, 'proxyTwo')"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                            </s:else>
                        <td id="proxyThree${p.id}">
                            <s:if test="#request.p.proxyTwo != null and #request.p.proxyThree == null">
                                <a class="button popover_button" onclick="onDivShow(${p.id}, 'proxyThree')"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                            </s:if>
                            <s:elseif test="#request.p.proxyTwo != null and #request.p.proxyThree != null">
                                ${p.proxyThree.name}
                            </s:elseif>
                            <s:else>
                                <button id="btn_a_proxyThree${p.id}" class="button" type="button" disabled="disabled">添加</button>
                                <a id="btn_b_proxyThree${p.id}" class="button popover_button" style="display:none;" onclick="onDivShow(${p.id}, 'proxyThree')"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                            </s:else>
                        </td>
                        </s:if>
                        <%-- 审核 --%>
                        <s:elseif test="#request.operation == 'audit'">
                        <td>
                            <s:if test="#request.p.proxyOne != null and (#request.p.proxyOneStatus == null or #request.p.proxyOneStatus.toString() == 'wait_audit' or #request.p.proxyOneStatus.toString() == 'within_audit')">
                                <a href="#duty_proxy/audit_detail.xhtml?proxy.id=${p.id}&who=1&t=<%=new java.util.Date().getTime()%>" class="button"><span class="icon" style="background:url(${ctx}/images/img/page_edit.png)">&nbsp;</span>${p.proxyOne.name}</a>
                            </s:if>
                            <s:else> ${p.proxyOne.name} </s:else>
                        </td>
                        <td>
                            <s:if test="#request.p.proxyTwo != null and (#request.p.proxyTowStatus == null or #request.p.proxyTowStatus.toString() == 'wait_audit' or #request.p.proxyTowStatus.toString() == 'within_audit')">
                                <a href="#duty_proxy/audit_detail.xhtml?proxy.id=${p.id}&who=2&t=<%=new java.util.Date().getTime()%>" class="button"><span class="icon" style="background:url(${ctx}/images/img/page_edit.png)">&nbsp;</span>${p.proxyTwo.name}</a>
                            </s:if>
                            <s:else> ${p.proxyTwo.name} </s:else>
                        <td>
                            <s:if test="#request.p.proxyThree != null and (#request.p.proxyThreeStatus == null or #request.p.proxyThreeStatus.toString() == 'wait_audit' or #request.p.proxyThreeStatus.toString() == 'within_audit')">
                                <a href="#duty_proxy/audit_detail.xhtml?proxy.id=${p.id}&who=3&t=<%=new java.util.Date().getTime()%>" class="button"><span class="icon" style="background:url(${ctx}/images/img/page_edit.png)">&nbsp;</span>${p.proxyThree.name}</a>
                            </s:if>
                            <s:else> ${p.proxyThree.name} </s:else>
                        </td>
                        </s:elseif>
                        <%-- 浏览 --%>
                        <s:else>
                        <td><s:if test="#request.p.proxyOneStatus != null && #request.p.proxyOneStatus.toString() == 'pass_audit'">${p.proxyOne.name}</s:if></td>
                        <td><s:if test="#request.p.proxyTowStatus != null && #request.p.proxyTowStatus.toString() == 'pass_audit'">${p.proxyTwo.name}</s:if></td>
                        <td><s:if test="#request.p.proxyThreeStatus != null && #request.p.proxyThreeStatus.toString() == 'pass_audit'">${p.proxyThree.name}</s:if></td>
                        </s:else>
                    </tr>
                    </s:iterator>
                    <s:if test="#request.proxies == null or #request.proxies.size() == 0">
                        <tr><td>没有数据</td></tr>
                    </s:if>
                    </tbody>
                </table>
            </div>
            <s:if test="#request.operation == 'set'">
            <div class="form-action clearfix">
                <br/>
                <p>
                    <input type="checkbox" id="check_all" onchange="checkAll(this, 'checkbox_proxy')" style="margin-top:-2px;margin-right:4px"/><label for="check_all">全选</label>
                    <button class="button" type="button" onclick="deleteChecked()">批量删除</button>
                    <a class="button" href="#duty_proxy/add.xhtml?t=<%=new java.util.Date().getTime()%>"><span style="background:url(${ctx}/images/img/add.png)" class="icon">&nbsp;</span>添加</a>
                    <a class="button" onclick="onEdit()"><span class="icon" style="background:url(${ctx}/images/img/page_edit.png)">&nbsp;</span>修改</a>
                </p>
            </div>
            </s:if>
        </div>
    </div>
</div>

<div class="clear"></div>


<div id="simple-popover" class="popover">
    <header> 添加职务代理人</header>
    <section>
        <div class="content">
            <nav>
                <ul id="duty_proxy_div">
                	<li class="new"><a><p> 搜索： <input name="textfield" type="text" id="textfield" value="王" /></p></a></li>
                    <li class="read"><a><span class="avatar"></span>王海
                    <button class="button" type="submit" id="simple-button2">添加</button></a></li>
                    <li class="read"><a><span class="avatar"></span>王海涛
                    <button class="button" type="submit" id="simple-button2">添加</button></a></li>
                </ul>
            </nav>
        </div>
    </section>
</div>

<input type="hidden" id="current_duty_proxy_id" />
<input type="hidden" id="current_duty_proxy_who" />

<script type="text/javascript" src="${ctx}/js/global_util.js" />
<script type="text/javascript" src="js/Tree.js"></script>
<script type="text/javascript">
    $(function(){
        findEmployeeForDutyProxy("", "");
        
        //设置弹出框(jquery.popover)
        $("a.popover_button").each(function(){
            $(this).popover('#simple-popover', {});
        });
    });

    //查找指定类型的雇员(type: 0为任职人， 1为第一代理 人，2为第二代理人，3为第三代理人)
    function findEmployeeForDutyProxy(type, name){
        $.getJSON("${ctx}/ajax/proxy_employee.xhtml?type=" + type+"&name="+name, function(employees) {
            var obj = $("#duty_proxy_div");
            obj.html("");
            temp = '<li class="new"><a><p> 搜索： <input name="textfield" type="text" value="'+name+'" onblur="findEmployeeForDutyProxy(\''+type+'\', $(this).val())"/></p></a></li>';
            obj.append(temp);
            if (employees != null && employees.length > 0) {
                $.each(employees, function(i, employee) {
                    temp = '<li class="read"><a><span class="avatar"></span>'+employee.name+' <button class="button" type="submit" id="simple-button2" onclick="setDutyProxy('+employee.id+',\''+employee.name+'\')">添加</button></a></li>';
                    obj.append(temp);
                });
            }
        });
    }

    function onDivShow(id, who){
        $("#current_duty_proxy_id").val(id);
        $("#current_duty_proxy_who").val(who);
    }

    //设置代理人
    function setDutyProxy(uid, uname){
        var id = $("#current_duty_proxy_id").val(); //当前代理ID
        var who = $("#current_duty_proxy_who").val(); //第几代理人
        if(uid == null || id == null || who == null){
            return;
        }
        
        $.getJSON("${ctx}/ajax/proxy-set.xhtml?dutyProxy.id=" + id +"&dutyProxy."+who+".id="+uid, function(result) {
            if(result){
                $("#simple-popover").hide();
                $("#"+who+id).html(uname);
                if(who == "proxyOne"){
                    $("#btn_a_proxyTwo"+id).hide();
                    $("#btn_b_proxyTwo"+id).show();
                }else if(who == "proxyTwo"){
                    $("#btn_a_proxyThree"+id).hide();
                    $("#btn_b_proxyThree"+id).show();
                }
            }
        });
    }

    //删除
    function deleteChecked(){
        var checkIds = new Array();
        $("input[type='checkbox'][name='checkbox_proxy']").each(function(){
            if(this.checked){
                checkIds.push(this.value);
            }
        });
        if(checkIds.length == 0){
            return;
        }
        if(confirm("确定要删除选中的数据吗？")){
            var url = "${ctx}/duty_proxy/remove.xhtml";
            refreshListContent(url, {"organizationId":"${organizationId}", "ids":checkIds.join(",")});
        }
    }

    function onEdit(){
        var id = 0;
        $("input[type='checkbox'][name='checkbox_proxy']").each(function(){
            if($(this).attr("checked")){
                id = $(this).attr("value");
                return false;
            }
        });

        if(id > 0){
            window.location.href = "#duty_proxy/add.xhtml?proxy.id=" + id;
        }
    }
</script>